<template>
    <div class="login-wrap">
        <div class="ms-login">
            <div class="ms-title">轻量级AI大数据系统</div>

            <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content"
            v-if="this.loginOrRegister === 0">
                <el-form-item prop="organization">
                    <el-select v-model="param.organization" placeholder="请选择机构" style="width: 300px">
                        <el-option value="南京大学软件学院" label="南京大学软件学院"></el-option>
                        <el-option value="南京大学商学院" label="南京大学商学院"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="username">
                    <el-input v-model="param.userName" placeholder="请输入用户名">
                        <template #prepend>
                            <el-button icon="el-icon-user"></el-button>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" placeholder="请输入密码" v-model="param.password"
                        @keyup.enter="submitLoginForm()">
                        <template #prepend>
                            <el-button icon="el-icon-lock"></el-button>
                        </template>
                    </el-input>
                </el-form-item>
                <div class="login-btn">
                    <el-button type="primary" @click="submitLoginForm()">登录</el-button>
                </div>
                <el-button type="text" class="login-tips" @click="loginOrRegister = 1">
                    没有账号，去注册
                </el-button>
            </el-form>

            <el-form :model="param" :rules="rules" ref="register" label-width="0px" class="ms-content"
                     v-if="this.loginOrRegister === 1">
                <el-form-item prop="organization">
                    <el-select v-model="param.organization" placeholder="请选择机构" style="width: 300px">
                        <el-option value="1" label="南京大学软件学院"></el-option>
                        <el-option value="2" label="南京大学商学院"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="username">
                    <el-input v-model="param.userName" placeholder="请输入用户名">
                        <template #prepend>
                            <el-button icon="el-icon-user"></el-button>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" placeholder="请输入密码" v-model="param.password"
                              @keyup.enter="submitRegisterForm()">
                        <template #prepend>
                            <el-button icon="el-icon-lock"></el-button>
                        </template>
                    </el-input>
                </el-form-item>
                <div class="login-btn">
                    <el-button type="primary" @click="submitRegisterForm()">注册</el-button>
                </div>
                <el-button type="text" class="login-tips" @click="loginOrRegister = 0">
                    已有账号，去登录
                </el-button>
            </el-form>
        </div>
    </div>
</template>

<script>
import { reactive } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import {login, register} from "../../api/user";

export default {
    setup() {
        const router = useRouter();
        let param = reactive({
            userName: "",
            password: "",
            organization: ""
        });

        const rules = {
            userName: [
                {
                    required: true,
                    message: "用户名不得为空",
                    trigger: "blur",
                },
            ],
            password: [
                {
                    required: true,
                    message: "密码不得为空",
                    trigger: "blur"
                },
            ],
            organization: [
                {
                    required: true,
                    message: "机构不得为空",
                    trigger: "blur"
                },
            ],
        };

        const submitLoginForm = () => {
           if (param.organization === "" || param.userName === "" || param.password === "") {
               ElMessage.warning("信息尚未填写完整");
               return;
           }
           login(param).then(res => {
               if (res.msg === '成功') {
                   localStorage.setItem("ms_username", param.userName);
                   localStorage.setItem("ms_userId", res.result.id);
                   ElMessage.success("登录成功，欢迎进入AI系统");
                   router.push("/fileList");
               } else {
                   ElMessage.error("信息错误，登录失败");
               }
           })
        };

        const submitRegisterForm = () => {
            if (param.organization === "" || param.userName === "" || param.password === "") {
                ElMessage.warning("信息尚未填写完整");
                return;
            }
            register(param).then(res => {
                if (res.msg === '成功') {
                    localStorage.setItem("ms_username", param.userName);
                    localStorage.setItem("ms_userId", res.result.id);
                    ElMessage.success("注册成功，欢迎进入AI系统");
                    router.push("/fileList");
                } else {
                    ElMessage.error("用户名已存在，注册失败");
                }
            })
        };

        const store = useStore();
        store.commit("clearTags");

        return {
            param,
            rules,

            submitLoginForm,
            submitRegisterForm
        };
    },

    data() {
        return {
            loginOrRegister: 0
        }
    },
};

</script>

<style scoped>
.login-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../../assets/img/bg.jpg);
    background-size: 100%;
}
.ms-title {
    width: 100%;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    border-bottom: 1px solid #ddd;
}
.ms-login {
    position: absolute;
    margin-left: 35%;
    margin-top: 100px;
    width: 30%;

    border-radius: 5px;
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
}
.ms-content {
    padding: 35px 35px;
    width: 300px;
}
.login-btn {
    text-align: center;
}
.login-btn button {
    width: 100%;
    height: 36px;
    margin-bottom: 10px;
}

.login-tips {
    font-size: 12px;
    line-height: 30px;
    color: #fff;
    margin-left: 60%;
}
</style>
